<!-- 分类页面 -->
<template>
  <div>
    <van-notify id="van-notify" />
    <div v-if="!avatarUrl">
      <button
        type="primary"
        size="large"
        class="login"
        open-type="chooseAvatar"
        @chooseavatar="onChooseAvatar"
        @click="login"
      >
        登录/注册
      </button>
    </div>
    <div v-if="avatarUrl">
      <van-image
        width="5rem"
        height="5rem"
        style="display: flex; justify-content: center; align-items: center"
        round
        :src="avatarUrl"
        @click="login"
      />
      <van-row class="user-links">
        <van-col span="6">
          <van-icon name="pending-payment" />
          待付款
        </van-col>
        <van-col span="6">
          <van-icon name="records" />
          待接单
        </van-col>
        <van-col span="6">
          <van-icon name="tosend" />
          待发货
        </van-col>
        <van-col span="6">
          <van-icon name="logistics" />
          已发货
        </van-col>
      </van-row>

      <van-cell-group class="user-group">
        <van-cell icon="records" title="全部订单" is-link />
      </van-cell-group>

      <van-cell-group>
        <van-cell icon="points" title="我的积分" is-link />
        <van-cell icon="gold-coin-o" title="我的优惠券" is-link />
        <van-cell icon="gift-o" title="我收到的礼物" is-link />
      </van-cell-group>
      <van-button type="danger" @click="logout" size="large"
        >退出登录</van-button
      >
    </div>
  </div>
</template>

<script>
import Notify from "@vant/weapp/dist/notify/notify";
export default {
  //需要引入的组件
  components: {},
  props: {},
  //存放数据
  data() {
    return {
      mainActiveIndex: 0,
      activeId: 1,
      userInfo: "",
      avatarUrl: "",
      items: [
        {
          // 导航名称
          text: "CPU",
          // 导航名称右上角徽标，1.5.0 版本开始支持
          //   badge: 3,
          // 是否在导航名称右上角显示小红点，1.5.0 版本开始支持
          dot: false,
          // 禁用选项
          disabled: false,
          // 该导航下所有的可选项
          children: [
            {
              // 名称
              text: "英特尔",
              // id，作为匹配选中状态的标识
              id: 1,
              // 禁用选项
              disabled: false,
            },
            {
              text: "AMD",
              id: 2,
            },
          ],
        },
        {
          // 导航名称
          text: "CPU",
          // 导航名称右上角徽标，1.5.0 版本开始支持
          //   badge: 3,
          // 是否在导航名称右上角显示小红点，1.5.0 版本开始支持
          dot: false,
          // 禁用选项
          disabled: false,
          // 该导航下所有的可选项
          children: [
            {
              // 名称
              text: "INTEL",
              // id，作为匹配选中状态的标识
              id: 1,
              // 禁用选项
              disabled: false,
            },
            {
              text: "AMD",
              id: 2,
            },
          ],
        },
      ],
    };
  },
  //计算属性
  computed: {},

  mounted: {},

  methods: {
    onClickItem1(data) {
      console.log(data);
      this.activeId = data.target.id;
      //   this.setData(activeId);
    },
    onChooseAvatar(e) {
      this.avatarUrl = e.mp.detail.avatarUrl;
      Notify({ message: "登录成功", type: "primary", selector: "#van-notify" });
      console.log(this.avatarUrl);
    },
    login() {
      wx.login({
        success(res) {
          if (res.code) {
            console.log(res);
          } else {
            console.log("登录失败！" + res.errMsg);
          }
        },
      });
    },
    logout() {
      this.avatarUrl = "";
    },
  },
};
</script>
<style>
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
}
.user-group {
  margin-bottom: 15px;
}
.user-links {
  padding: 15px 0;
  font-size: 12px;
  text-align: center;
  background-color: #fff;
}
.user-links .van-icon {
  display: block;
  font-size: 24px;
}
</style>
